<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>列表页</title>
  <link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/list.css">
  <!-- 导入 分页显示插件的 css外部文件 -->
  <link rel="stylesheet" href="../jquery-pagination/pagination.css">
</head>
<body>
  <h1></h1>



  <div class="container">
    <!-- 内容,根据服务器响应的数据,动态渲染生成 -->
    <ul></ul>
  </div>
  <div class="pagi">

    <!-- 分页显示div标签 -->
    <div class="page m-style"></div>
  </div>



  <script src="../js/jquery.min.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../jquery-pagination/jquery.pagination.js"></script>
  <script src="../js/tools.js"></script>
  <script>
    
    // 1, 获取和设定参数数据
    // 获取 浏览器地址栏中 存储的 cat_one_id 参数
    const urlObj = getUrlVal();
    $('h1').html(urlObj.cat_one_id);

    // 设定当前页数参数 默认值是 1 
    // 也就是初始状态 显示第一页
    let page = 1;

    // 根据实际项目需求,设定每页显示数据数量
    // 目前随便写一个8
    let line = 8;

    // 调用函数 , 当前page的数值是 1
    setPage();


    // 封装一个函数 向页面发送请求
    // 并且 动态渲染生成初始页面
    function setPage(){
      pJQuery('../server/goods_list.php','get',{ cat_one_id: urlObj.cat_one_id , page: page , line:line },'json')
      .catch(()=>{
        alert('页面崩溃了呜呜呜。。。。。还是回首页吧');
        window.location.href = './index.html';
      }).then(res=>{
          console.log(res);

          // 动态渲染生成页面
          let str = '';
          res.data.forEach(item=>{
            str += `
            <li class="list-item" height="612px">
              <div class="panel panel-primary">
                <div class="panel-body">
                  <ol class="breadcrumb">
                    <li><a href="#">${item.cat_one_id}</a></li>
                    <li><a href="#">${item.cat_two_id}</a></li>
                    <li class="active">${item.cat_three_id}</li>
                  </ol>
                </div>
                <div class="panel-footer">
                  <div class="row">
                    <div class="">
                      <div class="thumbnail">
                        <img src="${item.goods_big_logo}" alt="...">
                        <div class="caption">
                          <h3>${item.goods_name}</h3>
                          <p>
                            <i class="glyphicon glyphicon-yen"></i>
                            <span>${item.goods_price}</span>
                          </p>
                          <p>
                            <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                            <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            `;
          })

          // 写入标签对象
          $('.container ul').html(str);

          // 获取数据库数据,根据响应结果,设定分页显示程序
          $('.page').pagination({

            pageCount: res.sumPage ,    // 总页数
            totalData: res.row,         // 数据总数量
            current: res.page,          // 当前第几页
            showData: res.line,         // 每页数据数量
            prevCls: 'prev',            // 上一页的类名  默认是prev有样式效果修改之后样式效果就没有了
            nextCls: 'next',            // 下一页的类名
            prevContent: '上一页',       // 上一页节点内容 标签中显示的文字内容
            nextContent: '下一页',       // 下一页节点内容 标签中显示的文字内容
            mode: 'fixed',              // 固定分页显示,页数按钮的数量
            count: 4,                   // 分页按钮的数量,不算当前页是4个多余的按钮,一共是5个按钮
            coping: true,               // 显示 首页 末页 默认显示 首页末页数值
            homePage: '首页',           // 设定首页节点内容 也就是显示的文字 
            endPage: '末页',            // 设定末页节点内容 也就是显示的文字 
            isHide: true,               // 总页数为 0 或者 1 时 隐藏分页控件
            keepShowPN: false,          // 第一页隐藏上一页 最后一页隐藏下一页  mode要设定为 unfixed
            jump: true,                 // 开启跳转
            // jumpIptCls: '',          // input输入框class类名设定
            // jumpBtnCls: '',          // 跳转按钮的类名
            jumpBtn: '跳转',            // 跳转按钮的文字内容
            callback: function(val){       // 回调函数
              // console.log( val );
              // 点击的分页控件(按钮)  对应的页数
              // console.log( val.getCurrent() );
              // 根据获取的 点击控件 对应的页数,设定变量page
              page = val.getCurrent();
              // 根据新的 page 的数据 向数据库再次发起请求
              // 再次动态渲染生成页面
              setPage();
            }
        });
        });
      console.log(page);
    }
  </script>

</body>
</html>